import React from 'react';
import './BottomNav.css'
import * as actionTypes from '../../../pages/Cart/store/actionCreators'
import { connect } from 'react-redux';
import { Toast } from 'antd-mobile';
const BottomNav = (props) => {

    const {AddProduct} = props
    const {product = {}} =props 
    const addProductBtn = (data)=>{
        Toast.show({
            content: '商品已添加至购物车',
            icon: 'success',
            duration:1500
          })
        AddProduct(data)
    }
    return (
        <div className='bottomNav-outside'>
            <div className="bottomNav-container">
                <div className="navLeft-icons">
                    <div className="navLeft-item">
                        <div className='iconfont iconRed'> &#xe736;</div>
                        <div className='iconfont-plant'>店铺</div>
                    </div>
                    <div className="navLeft-item">
                        <div className='iconfont'> &#xe60f;</div>
                        <div className='iconfont-plant'>客服</div>
                    </div>
                    <div className="navLeft-item">
                        <div className='iconfont'> &#xe6c6;</div>
                        <div className='iconfont-plant'>收藏</div>
                    </div>
                </div>
                <div className="navRight-action">
                    <div className="actionLeft" onClick={()=>addProductBtn(product)}>加入购物车</div>
                    <div className="actionRight">立即购买</div>
                </div>
            </div>
        </div>
    );
}

const mapStateToProps = (state)=>{
    return{
        productList:state.cart.productList
    }
}

const mapStateToDispatch = (dispatch)=>{
    return {
        AddProduct: (data) => dispatch(actionTypes.changeCartList(data))
    }
}

export default connect(mapStateToProps,mapStateToDispatch)(BottomNav);
